<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例_计算属性实现</title>
    <script src="../vue.js"></script>
</head>

<body>
    <!-- 
        计算属性：
        1.定义：要用的属性不存在，要通过已有属性来计算。
        2.原理：底层借助了Object.defineproperty方法提供的getter和setter。
        3.get函数什么时候执行？
            （1）、初次读取时执行一次
            （2）、当依赖的数据发生改变时会被再次调用
        4.优势：与methods实现相比，内部会有缓存机制（复用），效率更高，调试方便。
        5.备注：
            1.计算属性最终会出现在vm上，直接读取使用即可
            2.如果计算属性要被修改，那必须写set函数去响应修改，且set中引起计算时依赖的数据发生变化
     -->
    <div id="root">
        姓：<input type="text" v-model="firstName"><br><br>
        名：<input type="text" v-model="lastName"><br><br>
        姓名：<span>{{fullName}}</span>
    </div>
    <script>
        Vue.config.productionTip=false;
        const vm=new Vue({ 
            el: '#root',
            data: {
                firstName:'黑',
                lastName:'三'
            },
            computed:{
                //get的作用，只要读取fullName，get就会被调用，且返回值作为fullName的值
                //get的调用，1、初次读取fullName时。2、所依赖的数据改变时
                fullName:{
                    get(){
                        return this.firstName+'-'+this.lastName
                    },
                    //set的调用只在改fullName的值
                    set(value){
                        const arr=value.split('-');
                        this.firstName=arr[0];
                        this.lastName=arr[1];

                    }
                }
            }
        })
    </script>
</body>

</html>